JavaScript Prestatie-optimalisatie: Code Splitting vs. Lazy Evaluation

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Laden...
}>
        
      
    

In dit voorbeeld wordt OtherComponent alleen geladen wanneer het wordt gerenderd. Terwijl het wordt geladen, ziet de gebruiker het bericht "Laden...".

Tools voor Code Splitting

• Webpack: Een populaire module bundler die verschillende code splitting-technieken ondersteunt.
• Rollup: Een andere module bundler die zich richt op het creëren van kleine, efficiënte bundels.
• Parcel: Een zero-configuratie bundler die code splitting automatisch afhandelt.
• Vite: Een build tool die gebruikmaakt van native ES-modules voor snelle ontwikkeling en geoptimaliseerde productiebuilds.

Lazy Evaluation: Berekeningen Uitstellen

Wat is Lazy Evaluation?

Lazy evaluation, ook bekend als uitgestelde evaluatie, is een programmeertechniek waarbij de evaluatie van een expressie wordt uitgesteld totdat de waarde ervan daadwerkelijk nodig is. Met andere woorden, berekeningen worden alleen uitgevoerd wanneer hun resultaten vereist zijn, in plaats van ze direct vooraf te berekenen.

Stel u voor dat u een meergangenmenu bereidt. U zou niet alle gerechten tegelijk koken. In plaats daarvan zou u elk gerecht pas bereiden wanneer het tijd is om het te serveren. Lazy evaluation werkt op een vergelijkbare manier, en voert berekeningen alleen uit wanneer hun resultaten nodig zijn.

Hoe Lazy Evaluation Werkt

In JavaScript kan lazy evaluation worden geïmplementeerd met verschillende technieken:

• Functies: Door een expressie in een functie te verpakken, kunt u de evaluatie ervan uitstellen totdat de functie wordt aangeroepen.
• Generators: Generators bieden een manier om iterators te creëren die op aanvraag waarden produceren.
• Memoization: Memoization houdt in dat de resultaten van kostbare functieaanroepen in de cache worden opgeslagen en het resultaat uit de cache wordt teruggegeven wanneer dezelfde invoer opnieuw voorkomt.
• Proxies: Proxies kunnen worden gebruikt om toegang tot eigenschappen te onderscheppen en de berekening van eigenschapswaarden uit te stellen totdat ze daadwerkelijk worden benaderd.

Voordelen van Lazy Evaluation

• Verbeterde Prestaties: Door onnodige berekeningen uit te stellen, kan lazy evaluation de prestaties aanzienlijk verbeteren, vooral bij het werken met grote datasets of complexe berekeningen.
• Minder Geheugengebruik: Lazy evaluation kan het geheugengebruik verminderen door het creëren van tussenliggende waarden te vermijden die niet onmiddellijk nodig zijn.
• Verhoogde Responsiviteit: Door onnodige berekeningen tijdens de initiële lading te vermijden, kan lazy evaluation de responsiviteit van de applicatie verhogen.
• Oneindige Datastructuren: Lazy evaluation stelt u in staat om te werken met oneindige datastructuren, zoals oneindige lijsten of streams, door alleen de benodigde elementen op aanvraag te berekenen.

Voorbeeld: Lazy Loading van Afbeeldingen

Een veelvoorkomend gebruik van lazy evaluation is het "lazy loaden" van afbeeldingen. In plaats van alle afbeeldingen op een pagina vooraf te laden, kunt u het laden van afbeeldingen die niet direct zichtbaar zijn in de viewport uitstellen. Dit kan de initiële laadtijd van de pagina aanzienlijk verbeteren en het verbruik van netwerkbandbreedte verminderen.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Dit voorbeeld gebruikt de IntersectionObserver API om te detecteren wanneer een afbeelding in de viewport komt. Wanneer een afbeelding zichtbaar is, wordt het src-attribuut ingesteld op de waarde van het data-src-attribuut, waardoor de afbeelding wordt geladen. De observer stopt vervolgens met het observeren van de afbeelding om te voorkomen dat deze opnieuw wordt geladen.

Voorbeeld: Memoization

Memoization kan worden gebruikt om kostbare functieaanroepen te optimaliseren. Hier is een voorbeeld:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simuleer een tijdrovende berekening
  for (let i = 0; i < 100000000; i++) {
    // Doe iets
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('Eerste aanroep');
console.log(memoizedCalculation(5)); // Eerste aanroep - kost tijd
console.timeEnd('Eerste aanroep');

console.time('Tweede aanroep');
console.log(memoizedCalculation(5)); // Tweede aanroep - geeft direct de gecachte waarde terug
console.timeEnd('Tweede aanroep');

In dit voorbeeld neemt de memoize-functie een functie als invoer en retourneert een gememoïseerde versie van die functie. De gememoïseerde functie slaat de resultaten van eerdere aanroepen op in de cache, zodat volgende aanroepen met dezelfde argumenten het gecachte resultaat kunnen teruggeven zonder de oorspronkelijke functie opnieuw uit te voeren.

Code Splitting vs. Lazy Evaluation: Belangrijkste Verschillen

Hoewel zowel code splitting als lazy evaluation krachtige optimalisatietechnieken zijn, richten ze zich op verschillende aspecten van prestaties:

• Code Splitting: Richt zich op het verkleinen van de initiële bundelgrootte door code op te delen in kleinere brokken en deze op aanvraag te laden. Het wordt voornamelijk gebruikt om de initiële laadtijd van de pagina te verbeteren.
• Lazy Evaluation: Richt zich op het uitstellen van de berekening van waarden totdat ze daadwerkelijk nodig zijn. Het wordt voornamelijk gebruikt om de prestaties te verbeteren bij kostbare berekeningen of grote datasets.

In wezen vermindert code splitting de hoeveelheid code die vooraf moet worden gedownload, terwijl lazy evaluation de hoeveelheid berekeningen vermindert die vooraf moet worden uitgevoerd.

Wanneer Code Splitting vs. Lazy Evaluation Gebruiken

Code Splitting

• Grote Applicaties: Gebruik code splitting voor applicaties met een grote hoeveelheid JavaScript-code, vooral die met meerdere routes of functies.
• Verbeteren van Initiële Laadtijd: Gebruik code splitting om de initiële laadtijd van de pagina te verbeteren en de tijd tot interactiviteit te verkorten.
• Verminderen van Netwerkbandbreedte: Gebruik code splitting om de hoeveelheid data die over het netwerk moet worden overgedragen te verminderen.

Lazy Evaluation

• Kostbare Berekeningen: Gebruik lazy evaluation voor functies die kostbare berekeningen uitvoeren of toegang hebben tot grote datasets.
• Verbeteren van Responsiviteit: Gebruik lazy evaluation om de responsiviteit van de applicatie te verbeteren door onnodige berekeningen tijdens de initiële lading uit te stellen.
• Oneindige Datastructuren: Gebruik lazy evaluation bij het werken met oneindige datastructuren, zoals oneindige lijsten of streams.
• Lazy Loading van Media: Implementeer lazy loading voor afbeeldingen, video's en andere media-assets om de laadtijden van de pagina te verbeteren.

Code Splitting en Lazy Evaluation Combineren

In veel gevallen kunnen code splitting en lazy evaluation worden gecombineerd om nog grotere prestatieverbeteringen te bereiken. U kunt bijvoorbeeld code splitting gebruiken om uw applicatie in kleinere brokken te verdelen en vervolgens lazy evaluation gebruiken om de berekening van waarden binnen die brokken uit te stellen.

Neem een e-commerce applicatie. U zou code splitting kunnen gebruiken om de applicatie op te delen in afzonderlijke bundels voor de productlijstpagina, de productdetailpagina en de afrekenpagina. Vervolgens zou u binnen de productdetailpagina lazy evaluation kunnen gebruiken om het laden van afbeeldingen of de berekening van productaanbevelingen uit te stellen totdat ze daadwerkelijk nodig zijn.

Verder dan Code Splitting en Lazy Evaluation: Extra Optimalisatietechnieken

Hoewel code splitting en lazy evaluation krachtige technieken zijn, zijn ze slechts twee stukjes van de puzzel als het gaat om JavaScript-prestatieoptimalisatie. Hier zijn enkele extra technieken die u kunt gebruiken om de prestaties verder te verbeteren:

• Minificatie: Verwijder onnodige karakters (bijv. witruimte, commentaar) uit uw code om de grootte te verkleinen.
• Compressie: Comprimeer uw code met tools zoals Gzip of Brotli om de grootte verder te verkleinen.
• Caching: Maak gebruik van browsercaching en CDN-caching om het aantal verzoeken naar uw server te verminderen.
• Tree Shaking: Verwijder ongebruikte code uit uw bundels om hun grootte te verkleinen.
• Afbeeldingsoptimalisatie: Optimaliseer afbeeldingen door ze te comprimeren, hun formaat aan te passen aan de juiste afmetingen en moderne afbeeldingsformaten zoals WebP te gebruiken.
• Debouncing en Throttling: Beheers de frequentie waarmee event handlers worden uitgevoerd om prestatieproblemen te voorkomen.
• Efficiënte DOM-manipulatie: Minimaliseer DOM-manipulaties en gebruik efficiënte technieken voor DOM-manipulatie.
• Web Workers: Verplaats rekenintensieve taken naar web workers om te voorkomen dat ze de hoofdthread blokkeren.

Conclusie

JavaScript-prestatieoptimalisatie is een cruciaal aspect voor het leveren van een positieve gebruikerservaring en het behalen van bedrijfsdoelstellingen. Code splitting en lazy evaluation zijn twee krachtige technieken die de prestaties aanzienlijk kunnen verbeteren door de initiële laadtijden te verkorten, het verbruik van netwerkbandbreedte te verminderen en onnodige berekeningen uit te stellen. Door te begrijpen hoe deze technieken werken en wanneer u ze moet gebruiken, kunt u snellere, responsievere en aangenamere webapplicaties creëren.

Vergeet niet rekening te houden met de specifieke vereisten van uw applicatie en de technieken te gebruiken die het meest geschikt zijn voor uw behoeften. Monitor voortdurend de prestaties van uw applicatie en herhaal uw optimalisatiestrategieën om ervoor te zorgen dat u de best mogelijke gebruikerservaring levert. Omarm de kracht van code splitting en lazy evaluation om webapplicaties te creëren die niet alleen rijk zijn aan functies, maar ook performant en prettig in gebruik zijn, wereldwijd.

Verdere Leerbronnen

• Webpack Documentatie: https://webpack.js.org/
• Rollup Documentatie: https://rollupjs.org/guide/en/
• Vite Documentatie: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - Optimize JavaScript Execution: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/